${template "main_header.html"}
<div id="app" class="page-content" :style="!urlobj.dialogstate ? 'margin-top:60px;':'margin-top:10px;'">
  <tab-tag v-if="!urlobj.dialogstate"></tab-tag>

  <div style="margin: 0 15px 15px 15px">
    <div class="flex cl">
      <div class="col-5">
        <div class="f-card" style="margin: 5px">
          <div class="f-card-body">
            <div id="main" style="width: 100%; height: 229px"></div>
          </div>
        </div>
      </div>
      <div class="col-7">
        <div class="f-card" style="margin: 5px">
          <div class="f-card-header">物品总览</div>
          <div class="f-card-body">
            <ul class="row cl">
              <li class="col-6">
                <a lay-href="app/content/comment" class="aaaaa">
                  <h3>总领用数量</h3>
                  <p><cite>152</cite></p>
                </a>
              </li>
              <li class="col-6">
                <a lay-href="app/content/comment" class="aaaaa">
                  <h3>发放数量</h3>
                  <p><cite>152</cite></p>
                </a>
              </li>
              <li class="col-4">
                <a lay-href="app/content/comment" class="aaaaa">
                  <h3>夏装服领用数量</h3>
                  <p><cite>100</cite></p>
                </a>
              </li>

              <li class="col-4">
                <a lay-href="app/content/comment" class="aaaaa">
                  <h3>被子领用数量</h3>
                  <p><cite>50</cite></p>
                </a>
              </li>
              <li class="col-4">
                <a lay-href="app/content/comment" class="aaaaa">
                  <h3>其他领用数量</h3>
                  <p><cite>2</cite></p>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <el-card shadow="never" style="min-height: 650px">
       <el-table  :tree-props="{children: 'children'}"  row-key="id" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" ref="multipleTable" border class="eltable" :data="list" style="width: 100%">
        <el-table-column align="center" type='' property="id" label="编号" show-overflow-tooltip width="70">
        </el-table-column>
        <el-table-column align="left" property="name" label="人员信息" show-overflow-tooltip width="200px">
          <template slot-scope="{row}">
            <div>姓名：{{row.name}}</div>
            <div>单位：{{row.org_name}}</div>
            <div>时间：{{row.create_time}}</div>
            <div>金额：{{row.order_amount}}</div>
          </template>
        </el-table-column>
        <el-table-column align="left" property="title" label="领用明细" show-overflow-tooltip>
          <template slot-scope="{row}">
            <div v-for="_row in row.order_goods" class="flex">
              <div style="width: 60px;">
                <el-image :src="_row.goods_img" style="width: 50px;height: 50px;"></el-image>
              </div>
              <div style="flex:1">
                <div style="font-size: 14px; color:#000; font-weight: bold;">{{_row.goods_name}}</div>
                <div>
                  <span>数量：</span><span style="color: red;">{{_row.buy_number}}</span>
                  <span>单价：</span><span style="color: red;">{{_row.goods_price}}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index"></Page>
    </el-card>
  </div>
</div>
<script src="/assets/echarts-4.4.0/echarts.min.js"></script>
<script src="/assets/js/app.js"></script>
<script>
  new Vue({
    el: '#app',
    components: {},
    data: function() {
      return {
        loading: false,
        result: {
          last_day_trade_amount: 0,
          last_day_trade_count: 0,
          last_day_profit: 0,
          zd_wjh: 0,
          zd_dkt: 0,
          zd_yjh: 0,



        },
        page_data: {
          limit: 200,
          page: 1,
          total: 20,
        },
        list: [],
      };
    },
    mounted() {
this.index()
      this.loadData()
    },
    methods: {
      loadData() {
        var _self = this;
        var myChart = echarts.init(document.getElementById('main'));
            var legendData = ['', '未激活', '待开通', '已激活'];
            var seriesData = [];
        myChart.setOption({
              title: {
                text: '各单位领用情况',
                subtext: '终端总数：' + 400,
                left: 'center',
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                data: legendData,
              },
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '50%'],
                data: [
                  {name:'单位1',value:100},
                  {name:'单位2',value:100},
                  {name:'单位3',value:100},
                  {name:'单位4',value:100},
                  ],
              }, ],
            });

            return


        $.get( 'index_data', {}, function(data) {
            _self.result.last_day_trade_amount = data.result.trade_data.amount;
            _self.result.last_day_trade_count = data.result.trade_data.count;

            var myChart = echarts.init(document.getElementById('main'));
            var legendData = ['', '未激活', '待开通', '已激活'];
            var seriesData = [];

            var total = 0;
            $(data.result.zd_list).each(function(i, item) {
              if (item.status === '1') {
                _self.result.zd_wjh = item.count;
              } else if (item.status === '2') {
                _self.result.zd_dkt = item.count;
              } else if (item.status === '3') {
                _self.result.zd_yjh = item.count;
              }
              total += parseInt(item.count);
              seriesData.push({
                name: legendData[item.status] + '(' + item.count + ')',
                value: item.count,
              });
            });
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption({
              title: {
                text: '终端情况',
                subtext: '终端总数：' + total,
                left: 'center',
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                data: legendData,
              },
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '50%'],
                data: seriesData,
              }, ],
            });
          },
          'json'
        );
      },
      index() {
        let param = {
          limit: this.page_data.limit,
          page: this.page_data.page
        }
        Object.assign(param, this.searchData)
        this.loading = true
        axios.post('/admin/order/index.html', param).then(res => {
          if (res.data.status == 200) {
            this.list = res.data.data.data
            this.page_data.total = res.data.data.total
            this.loading = false
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
    }
  })
</script>

<style>
  a:hover {
    color: #777;
  }

  a cite {
    font-style: normal;
    *cursor: pointer;
  }

  .aaaaa {
    display: block;
    padding: 10px 15px;
    background-color: #f8f8f8;
    color: #999;
    border-radius: 2px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    margin: 5px;
  }

  .aaaaa:hover {
    text-decoration: none;
  }

  .aaaaa h3 {
    padding: 0;
    margin: 0;
    padding-bottom: 10px;
    font-size: 12px;
  }

  .aaaaa p {
    padding: 0;
    margin: 0;
  }

  .aaaaa p cite {
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: #009688;
  }
</style>
${template "main_footer.html"}